/**
 * 课时介绍 购买前的有底部购买  购买后没有
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    FlatList,
    TouchableOpacity,
    NativeModules,
    Dimensions,
    Platform
} from 'react-native'
const { width } = Dimensions.get('window');
import OpenFile from 'react-native-doc-viewer';
import { Toast } from 'antd-mobile-rn';
import BackPressComponent from '../common/BackPressComponent';
import {setHW,setSpText} from '../component/ScreenUtil';
// import ImageView from 'react-native-image-view';
export default class DetailPeriods extends Component {
    constructor(props) {
        super(props);
        this.backPress = new BackPressComponent({ backPress: (e) => this.onBackPress(e) });
        this.state = {
            animating: false,
            isImageViewVisible: false,
            images: ''
        }
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.props.KeShiPeriodsList}
                    showsVerticalScrollIndicator={false}
                    renderItem={({ item }) => this.renderItem(item)}
                    keyExtractor={(item, index) => index}
                />
            </View>
        );
    }
    // 跳转到 课程目录页面
    gotoLessons(item) {
        this.props.navigation.navigate('DetailLesson', { courseId: item.COURSEID });
    }
    renderItem(item) {
        return (
            <View style={[styles.curriculumItem,item.IS_FREE == '0' && item.ISBUY == '0' ? {} : {padding:setHW(30)}]}>
                <View style={{ flexDirection: 'row' }}>
                    {item.IS_FREE == '0' && item.ISBUY == '0' ? <View style={styles.lineBorder}></View> : null}
                    <View style={item.IS_FREE == '0' && item.ISBUY == '0' ? { width: width - setHW(80) } : {width: width - setHW(60)}}>
                        {this.isShowEnter(item)}
                        <View style={styles.curriculumInfo}>
                            <View style={styles.flexrow}>
                                <View style={styles.circleBorder}></View>
                                <Text style={styles.curCommonText}>知识点:</Text>
                            </View>

                            <View style={[styles.knowageTextWrapper, styles.textAlignLeft]}>
                                {
                                    item.LISTTAG.map((tag, i) => {
                                        return (
                                            <View key={i} style={styles.knowageItemRadius}>
                                                <Text style={styles.knowageItem}>{tag.TAG_NAME}</Text>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                        </View>
                        <View style={styles.curriculumInfo}>
                            <View style={styles.flexrow}>
                                <View style={styles.circleBorder}></View>
                                <Text style={styles.curCommonText}>简介:</Text>
                            </View>
                            <View>
                                <Text style={[styles.curContent, styles.textAlignLeft]}>{this.filterIntro(item.INTRODUCE)}</Text>
                            </View>
                        </View>
                        {/*item.ISCOLLECT==-1 代表课程下架 不展示来自课程*/}
                        {
                            item.ISCOLLECT !== '-1' ?
                                <View >
                                    <View style={[styles.curriculumInfo, styles.flexrow]}>
                                        <View style={styles.circleBorder}></View>
                                        <Text style={styles.curCommonText}>该课时来自课程:</Text>
                                    </View>
                                    <TouchableOpacity style={item.IS_FREE == '0' && item.ISBUY == '0' ? 
                                    styles.fromLessons : styles.fromLessonsed}
                                        onPress={() => this.gotoLessons(item)}>
                                        <View style={styles.lessonImgs}>
                                            <Image style={styles.imgPIC} source={{ uri: item.PIC }}></Image>
                                            <View style={styles.lessonChannel}>
                                                <View style={styles.lessonChTextRadius}>
                                                    <Text style={styles.lessonChText}>{item.SUBJECTNAME}</Text>
                                                </View>
                                                <View style={styles.lessonChTextRadius}>
                                                    <Text style={styles.lessonChText}>{item.PERIODNAME}</Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={styles.lessonRight}>
                                            <Text style={styles.lessonName}>{this.MoreText(item.COURSE_NAME, 10)}</Text>
                                            <View style={styles.lessonTeacherWrapper}>
                                                <Image style={styles.lessonTeacherIcon} source={require('../assets/imgs/smallIcon.png')} />
                                                <Text style={styles.lessonTeacher}>{this.MoreText(item.USERNAME, 10)}</Text>
                                            </View>
                                            {this.FreeOrCharge(item)}
                                        </View>
                                    </TouchableOpacity>
                                </View>
                                : null
                        }

                    </View>
                </View>
            </View>
        )
    }
    // 去掉简介中的换行和空格
    filterIntro(text) {
        //替换所有的换行符
        text = text.replace(/\r\n/g, "")
        text = text.replace(/\n/g, "");
        //替换所有的空格（中文空格、英文空格都会被替换）
        text = text.replace(/\s/g, "");
        return (
            text
        )
    }

    // 课时介绍
    // 显示课程的价格，若该课程为免费，则显示为免费；若为收费，则展示收费金额，整数显示
    FreeOrCharge(item) {
        if (item.IS_FREE == '0') {//收费
            return (
                <View style={styles.priceWrapper}>
                    <Text style={styles.lessonPrefix}>¥</Text>
                    <Text style={styles.lessonPriceNumber}>{item.ToTalMONEY}</Text>
                </View>
            )
        } else {//免费
            return (
                <View style={styles.priceWrapper}>
                    <Text style={styles.lessonPriceText}>免费</Text>
                </View>
            )
        }
    }

    // 购买前展示第几课时  购买后展示成 进入学习 
    isShowEnter(item) {
        if (item.IS_FREE == '0' && item.ISBUY == '0') {//收费&&购买前
            return (
                <View >
                    <View style={styles.curriculumTitleWrapper}>
                        {this.courseName(item)}
                        <View style={styles.resIcon}>
                            {
                                item.LISTCOURSEWARE.map((elem, i) => {
                                    return (
                                        <View key={i}>
                                            {this.showPiced([elem.TYPE], false)}
                                        </View>
                                    )
                                })
                            }
                        </View>
                    </View>
                    {item.IS_FREE == '1' ? <View>
                        <TouchableOpacity onPress={() => { this.playRes(item) }}>
                            <Text style={styles.enterText}>进入学习></Text>
                        </TouchableOpacity>
                    </View> : null}
                </View>
            )
        }
        if (item.IS_FREE == '1' || item.ISBUY == '1') { //免费||购买后
            return (
                <View>
                    {
                        item.LISTCOURSEWARE.map((elem, i) => {
                            return (
                                <View style={styles.enterStudyBox} key={i}>
                                    <View style={styles.leftPar}>
                                        <TouchableOpacity onPress={() => { this.playRes(elem) }}>
                                            <View style={styles.flexrow}>
                                                {this.showPiced([elem.TYPE], true)}
                                                <Text style={styles.resourcesrName}>{this.MoreText(elem.NAME, 10)}</Text>
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                    <TouchableOpacity onPress={() => { this.playRes(elem) }}>
                                        <View style={styles.enterTextBox}>
                                            <Text style={styles.enterText}>进入学习</Text>
                                            <Image style={styles.enterImg} source={require('../assets/imgs/enterPic.png')} />
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            )
                        })
                    }
                </View>
            )
        }
    }
    // 显示课时名称，最多10个字符，多出字符使用省略号表示
    courseName(item) {
        if (item.TITLE.length > 10) {
            return (
                <Text style={styles.curriculumTitle}>第{item.NUMBER}课时 {item.TITLE.substring(0, 10) + '...'}</Text>
            )
        } else {
            return (
                <Text style={styles.curriculumTitle}>第{item.NUMBER}课时 {item.TITLE}</Text>
            )
        }
    }
    // 资源名字
    MoreText(text, MaxNum) {
        if (text) {
            if (text.length > MaxNum) {
                return (
                    text.substring(0, MaxNum) + '...'
                )
            } else {
                return (
                    text
                )
            }
        }
    }
    playRes(item) {
        global.log(item);
        this.handlePress(item)
    }

    didPressToObjcButton() {
        NativeModules.RNReactNativeDocViewer.showAlert('This is react-native');
    }

    handlePress = (item) => {

        // NativeModules.BaseBridge.playVideo('http://test.video.juziwl.cn/elearning/20180820/bac84be788f846fb9535d5b2f2417f36.mp4');

        // 文件类型 1视频 2音频 3图片 4ppt 5word 6pdf
        // NativeModules.BaseBridge.playVideo('http://test.video.juziwl.cn/elearning/20180820/bac84be788f846fb9535d5b2f2417f36.mp4');
        global.log(item, 'itemitit');
        // return;
        var _this = this;
        if (item.TYPE == 1 || item.TYPE == 2) {
            NativeModules.BaseBridge.playVideo(item.URL);
            return;
        }
        else {
            if ((item.TYPE == 4 || item.TYPE == 5) && Math.floor(item.SIZE / 1024 / 1024) >= 10) {
                // NativeModules.BaseBridge.lookPPT(item.URL);
                // return;
            }
            // if(item.TYPE == 3) {
            //     var objImage = new Image();
            //     objImage.src = item.URL;
            //     console.log(objImage,'1212');
            //     _this.setState({
            //         images: [{
            //             source: {
            //                 uri: 'https://cdn.pixabay.com/photo/2017/08/17/10/47/paris-2650808_960_720.jpg',
            //             },
            //             width,
            //         }],
            //         isImageViewVisible: true
            //     })
            //     return
            // }
            var matchExtions = {
                
            }
            Toast.loading('正在打开资源中', 0, true); // openDocBinaryinUrl
            OpenFile.openDocBinaryinUrl([{
                url: item.URL, // Local "file://" + filepath
                fileName: item.NAME,
                cache: false,
                fileType: this.getFileType(item.NAME.match(/\w*.(\w+)$/)[1])
            }], (error, url) => {
                if (error) {
                    Toast.hide();
                } else {
                    Toast.hide();
                }
            });
        }
    }
    getFileType(type) {
        // console.log(type)
        // if(type == 'pptx') {
        //     return 'ppt';
        // }
        // if(type == 'docx') {
        //     return 'doc';
        // }
        return type
    }
    onBackPress() {
        Toast.hide();
    }

    componentDidMount() {
        this.backPress.componentDidMount();
    }

    componentWillUnmount() {
        this.backPress.componentWillUnmount();
    }
    showPiced(FILETYPES, buyed) {
        if (FILETYPES && FILETYPES.length) {
            return FILETYPES.map((item, i) => {
                // 文件类型 1视频2音频3图片4ppt 5word 6pdf
                if (item == '1') {
                    return (
                        buyed ?
                            <Image key={i} style={styles.resDetIconed} source={require('../assets/imgs/video1.png')} /> :
                            <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/video.png')} />
                    )
                }
                if (item == '2') {
                    return (
                        buyed ?
                            <Image key={i} style={styles.resDetIconed} source={require('../assets/imgs/audio1.png')} /> :
                            <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/audio.png')} />
                    )
                }
                if (item == '3') {
                    return (
                        buyed ?
                            <Image key={i} style={styles.resDetIconed} source={require('../assets/imgs/pic1.png')} /> :
                            <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/pic.png')} />
                    )
                }
                if (item == '4') {
                    return (
                        buyed ?
                            <Image key={i} style={styles.resDetIconed} source={require('../assets/imgs/ppt1.png')} /> :
                            <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/ppt.png')} />
                    )
                }
                if (item == '5') {
                    return (
                        buyed ?
                            <Image key={i} style={styles.resDetIconed} source={require('../assets/imgs/word1.png')} /> :
                            <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/word.png')} />
                    )
                }
                if (item == '6') {
                    return (
                        buyed ?
                            <Image key={i} style={styles.resDetIconed} source={require('../assets/imgs/pdf1.png')} /> :
                            <Image key={i} style={styles.resDetIcon} source={require('../assets/imgs/pdf.png')} />
                    )
                }
            })

        }
    }
}



const styles = StyleSheet.create({
    flexrow: {
        flexDirection: 'row',
        height: setHW(40),
        alignItems: 'center',
    },
    enterTextBox: {
        height: setHW(28),
        flexDirection: 'row',
        alignItems: 'center',
    },
    enterImg: {
        width: setHW(10),
        height: setHW(18),
        marginLeft:setHW(6),
        resizeMode: 'cover'
    },
    goStudy: {
        fontSize: setSpText(22),
        backgroundColor: '#FF8A00',
        color: '#fff',
        borderRadius: setHW(20),
        paddingLeft: setHW(20),
        paddingRight: setHW(20),
        paddingTop: setHW(4),
        paddingBottom: setHW(4),
    },
    enterStudyBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: setHW(20),
    },
    leftPar: {
        flexDirection: 'row',
    },
    resourcesrName: {
        color: '#666',
        fontSize: setSpText(28),
        marginLeft: setHW(4),
        paddingTop: setHW(4),
    },
    enterText: {
        color: '#FF8A00',
        fontSize: setSpText(28),
    },
    lessonName: {
        fontSize: setSpText(28),
        color: '#333',
        paddingTop: setHW(20),
        marginBottom: setHW(12),
    },
    imgPIC: {
        width: setHW(280),
        height: setHW(180),
    },
    curriculumItem: {
        width: width,
        padding: setHW(20),
        flexDirection: 'row',
        backgroundColor: '#fff',
    },
    checkWrapper: {
        marginTop: setHW(8)
    },
    curriculumTitleWrapper: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        marginBottom: setHW(10),
        borderColor: 'red'
    },
    // 竖线
    lineBorder: {
        width: setHW(6),
        height: setHW(28),
        backgroundColor: '#FF9920',
        borderRadius: setHW(10),
        marginRight: 10,
        marginTop: setHW(4),
    },
    curriculumTitle: {
        fontSize: setSpText(28),
        color: '#333',
    },

    // 小圆点
    circleBorder: {
        width:setHW(12),
        height:setHW(12),
        marginRight: 10,
        marginLeft: setHW(10),
        borderRadius: setHW(18),
        backgroundColor: '#FF9920'
    },
    textAlignLeft: {
        paddingLeft: setHW(42),
    },
    resIcon: {
        paddingLeft: setHW(20),
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    resDetIcon: {
        width: setHW(32),
        height: setHW(32),
        marginRight: setHW(6),
        marginLeft: setHW(6),
        resizeMode: 'contain'
    },
    resDetIconed: {
        width: setHW(32),
        height: setHW(32),
        marginRight: setHW(6),
        resizeMode: 'contain'
    },

    knowageTextWrapper: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    knowageItemRadius: {
        padding: setHW(8),
        height: setHW(40),
        backgroundColor: '#FFF4E8',
        borderRadius: setHW(8),
        marginRight: setHW(10),
        marginTop: setHW(10),
        justifyContent: 'center',
        alignItems: 'center',
    },
    knowageItem: {
        color: '#FF9920',
        fontSize: setSpText(26),
    },
    // 知识点 简介标题
    curCommonText: {
        color: "#666",
        fontSize: setSpText(28),
    },
    curContent: {
        lineHeight: setHW(40),
        paddingRight: setHW(10),
        color: '#999',
        fontSize: setSpText(26),
    },
    curriculumInfo: {
        marginTop:setHW(10),
    },
    fromLessons: {
        borderColor: '#EBEBEB',
        borderRadius: setHW(8),
        borderWidth: 0.5,
        flexDirection: 'row',
        padding: setHW(20),
        marginTop: setHW(10),
    },
    fromLessonsed: {
        borderColor: '#EBEBEB',
        borderRadius: setHW(8),
        borderWidth: 0.5,
        flexDirection: 'row',
        padding: setHW(20),
        marginTop: setHW(10),
        width: width - 40,
    },
    lessonImgs: {
        width: setHW(280),
        height: setHW(180),
        backgroundColor: 'pink',
        marginRight: setHW(20),
    },
    lessonChannel: {
        position: 'absolute',
        bottom: setHW(20),
        left: 0,
        flexDirection: 'row'
    },
    lessonChTextRadius: {
        height: setHW(36),
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: setHW(8),
        backgroundColor: 'rgba(99,99,100,.8)',
        marginLeft:setHW(10),
        paddingLeft: setHW(16),
        paddingRight: setHW(16),
    },
    lessonChText: {
        fontSize: setSpText(22),
        color: '#fff',
    },
    lessonTeacherWrapper: {
        flexDirection: 'row',
        marginTop: setHW(10),
        height: setHW(40),
        alignItems: 'center',
    },
    lessonTeacher: {
        color: '#999',
        fontSize: setSpText(26),
    },
    lessonTeacherIcon: {
        width: setHW(22),
        height: setHW(28),
        marginRight: setHW(6)
    },
    priceWrapper: {
        flexDirection: 'row',
        marginTop: setHW(20),
    },
    lessonPrefix: {
        fontSize: setSpText(24),
        color: '#FF9920',
        paddingTop: setHW(4),
    },
    lessonPriceNumber: {
        fontSize: setSpText(28),
        color: '#FF9920',
        fontWeight: 'bold',
    },
    lessonPriceText: {
        fontSize: setSpText(26),
        color: '#FF9920',
        fontWeight: 'bold',
    }
});